<!DOCTYPE html>
<html  lang="en">
    <head>
        <title>Document</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{msg}}
        </div>

        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    msg: 'ok',
                },
                // 组件生命周期：1.create 2.mount 3.update 4.destroy
                // 生命周期函数：1.beforeCreate created 
                //              2.beforeMount mounted 
                //              3.beforeUpdate updated 
                //              4.beforeDestroy destroyed
                beforeCreate(){
                    console.log("beforeCreate...")
                },
                created(){
                    console.log("created...")
                },
                beforeMount(){
                    console.log("beforeMount...")
                },
                mounted(){
                    console.log("mounted...")//"访问dom,setInterval,window.onscroll, 监听事件 ajax"
                },
                beforeUpdate(){
                    console.log("beforeUpdate...")
                },
                updated(){
                    console.log("updated...")//"更新之后可以访问dom"
                },
                beforeDestroy(){
                    console.log("updated...")//"clearInterval ,window.onscroll=null,$off"
                },
                destroyed(){
                    console.log("destroyed...")//"clearInterval ,window.onscroll=null,$off"
                }
            })
        </script>
    </body>
</html>